// import './common.styl'; // 使用了工作流的开发就可以直接引用，工作流套件会支佛那个转义成css
// parcel安排一个车间专门处理一下就好,把styl文件变成css的地方
import React from 'react';
import ReactDom from 'react-dom'; //把App组件挂载到#root
// react-router-dom提供了一系列的组件，react组件化非常完美
import 'antd/dist/antd.css';
import { routes } from './route/index';
import Header from './components/header';
import { Link, BrowserRouter as Router, Switch, Route, Redirect, useHistory, useParams, useLocation } from 'react-router-dom';
import { Layout, Button, Row } from 'antd';

const App = () => {
    return (
        <Router>
            <Layout className="page">
                <Header></Header>
                <Layout.Content>
                    <div className="wrap">
                        <Switch>
                            {
                                routes.map((route, index) => {
                                    return (
                                        <Route
                                            key={index}
                                            path={route.path}
                                            exact={route.exact}
                                            render={(props) => {
                                                return route.render(props)
                                            }}
                                        >
                                        </Route>
                                    )
                                })
                            }
                        </Switch>
                    </div>
                </Layout.Content>
            </Layout>
        </Router>
    )
}

const Home = () => (
    <>
        <h1>
            Home
        </h1>
        <FakeText></FakeText>
    </>
)

const About = (
    // {
    // history,
    // match: { params: { name } }
    // }
) => {
    // console.log(name, '+++++');
    const history = useHistory(); //hooks函数
    const { name } = useParams();
    const { pathname } = useLocation();
    // console.log(pathname);
    return (
        <>
            <h1>
                <Button type="primary">按钮</Button>
                {/* 路由守卫 Redirect可以做登录路由守卫，不符合条件无法登陆并返回登录页面 */}
                {name !== '发哥' ? <Redirect to="/"></Redirect> : null}
                About:{name}
            </h1>
            <button onClick={() => history.push("/")}>Go to home</button>
            <FakeText></FakeText>
        </>
    )
}

const Contact = () => (
    <>
        <h1>
            124134134
        </h1>
        <FakeText></FakeText>
    </>
)

const FakeText = () => (
    <p>
        faker nb!
    </p>
)

ReactDom.render(
    <App></App>,
    document.getElementById('root')
)
// console.log('hello world');